<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/element.css">
    <#include "/include/commonjs.html">
    <script src="/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
    <script type="text/javascript" src="/tinymce/plugins/codesample/plugin.min.js"></script>
</head>
<script>
    tinymce.init({
        selector:'textarea',
        height: 650, //编辑器高度
        min_height: 500,
        language : "zh-Hans",
        plugins: [
            'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
            'searchreplace', 'wordcount', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media',
            'table', 'emoticons', 'template', 'help','codesample'
        ],
        toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
            'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
            'forecolor backcolor emoticons | help | codesample',
        menu: {
            favs: { title: '我的菜单', items: 'code visualaid | searchreplace | emoticons' }
        },
        menubar: 'favs file edit view insert format tools table help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
    });
</script>
<body>
<div id="app">
    <div>
        <el-form :model="form"  label-width="60px" class="demo-ruleForm" :rules="rules" ref="form">
            <el-row>
                <el-col :span="20">
                    <el-form-item label="标题: " prop="title">
                        <el-input placeholder="请输入标题" v-model="form.title" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button style="margin-left: 15px" type="primary" @click="submitFrom('form')">提交</el-button>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="10">
                    <el-form-item label="标签: " prop="tags" >
                        <el-input placeholder="请输入标签" v-model="form.tags"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="栏目: " prop="channelId" >
                        <el-cascader
                                v-model="form.channelId"
                                :options="data"
                                :props="props"
                                style="width: 100%"
                                :clearable="true"
                                @change="handleChange_channel">
                        </el-cascader>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="padding-left: 20px;padding-right: 20px">
            <textarea id="content-main">Next, use our Get Started docs to setup Tiny!</textarea>
        </div>

    </div>

</div>
<script type="text/javascript">
    var Main = {
        data() {
            return{
                activeIndex: '2',
                activeIndex2: '2',
                form:{
                    channelId:${channelId}
                },
                formLabelWidth:'120px',
                restaurants: [],
                state: '',
                select: '',
                data: [],
                props:{
                    children: 'childs',
                    label: 'channelname',
                    value:'id',
                    checkStrictly:true,
                    emitPath:false
                },
                rules: {
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    tags: [
                        {required: true, message: '请输入标签', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    channelId:[
                        {required: true, message: '请选择栏目id', trigger: 'blur'},
                    ],
                }
            }
        },
        created(){
            this.getChannel()
        },
        methods: {
            getChannel(){
                api.GET('/channel/getallchannel',null,(res)=>{
                    if(res.code===0){
                        this.data=res.data;
                    }
                })
            },
            handleChange_channel(val){
                this.form.channelId=val;
            },
            submitFrom(formName){
                console.log(JSON.stringify(this.form))
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //获取富文本
                        var content=tinymce.get('content-main').getContent();
                        var data={'title':this.form.title,'content':content,'tag':this.form.tags,'channelId':this.form.channelId,'isPrivate':false};
                        console.log(JSON.stringify(data))
                        api.POST('/note/save',data,(result)=>{
                            if (result.code==0){
                                this.$message({
                                    showClose: true,
                                    message: '添加成功',
                                    type: 'success'
                                });
                                window.location.href="/update?id="+result.data
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            locationfref(href){
                window.open(href);
            },
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')


</script>
</body>
</html>